<template>
  <div>
<!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据统计</el-breadcrumb-item>
        <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
<!-- 卡片 -->
    <el-card>
        <!-- 第二步 -->
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" ref="chart" style="width: 800px;height:500px;"></div>
    </el-card>
  </div>
</template>

<script>

// 第一步  .导入echarts 绘图表工具
// import echarts from 'echarts'

// 导入loadsh，这里用于合并对象
import _ from 'lodash'

export default {
  name: 'report',
  data(){
      return{
        //   需要合并获取到的数据
          options: {
            title: {
                text: '用户来源'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#E9EEF3'
                    }
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    boundaryGap: false
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ]
        }
      }
  },
  created(){

  },
    //   此时，页面上的元素，已经被渲染完毕了
  mounted(){
      this.getdata() 
  },
  methods:{
      getdata(){
    //   第三步
        var echarts = require("echarts")//在这里导入，解决了报错的问题
    // console.log(echarts)
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(this.$refs.chart);
        // var bar_dv = this.$refs.chart
        this.$axios.get('reports/type/1').then(res=>{
            console.log("res==> ",res)
            if(res.data.meta.status!==200) return this.$message.error('获取折现数据失败')
            // var myChart = this.$echarts.init(bar_dv)
            // 第四步
            // 准备数据和配置项

            // 第五步
            // 使用刚指定的配置项和数据显示图表。
            const result=_.merge(res.data.data,this.options)
            myChart.setOption(result);
            console.log(res)
        })
     }
  }
}
</script>

<style lang="less" scoped>
</style>
